<template>
  <div class="workCalendar h100">
    <div class="left-part">
      <dividerTitle :title="componentTitle"> </dividerTitle>
      <div class="calendar">
        <calendar
          @clickDate="clickDate"
          @preClick="preClick"
          @nextClick="nextClick"
        ></calendar>
      </div>
    </div>
    <div class="dalyItem">
      <div class="workTittle">
        <span>{{ selectDate }}</span>
        <el-divider direction="vertical"></el-divider>
        <span>{{ workArr.length + doneArr.length }}项任务</span>
      </div>
      <div class="itemContent">
        <div class="no-data" v-if="!workArr.length && !doneArr.length">
          暂无数据
        </div>
        <div
          class="workItem"
          v-for="(item, index) in workArr"
          :key="index"
          @click="goPage(item)"
        >
          <!-- <label class="itemType" :class="item.className">{{item.orderTypeName}} </label>  -->
          <label class="itemType">{{ item.orderTypeName }} </label>
          <span class="itemTitle">{{ item.title }}</span>
        </div>
        <div v-if="doneArr.length > 0 && !foldDone">
          <div
            class="workItem"
            v-for="(item, index) in doneArr"
            :key="index"
            @click="goPage(item)"
          >
            <!-- <label class="itemType" :class="item.className" >{{item.orderTypeName}} </label>  
          <span class="itemTitle">{{item.title}}</span>-->
            <label class="doneType">{{ item.orderTypeName }} </label>
            <span class="doneTitle">{{ item.title }}</span>
          </div>
        </div>
        <div class="doneItem" v-if="doneArr.length > 0">
          <el-divider v-if="foldDone"
            ><span @click="toggleFold(foldDone)" class="done-item-text"
              >{{ doneArr.length }}个已完成任务<i
                class="el-icon-bottom"
              ></i></span
          ></el-divider>
          <el-divider v-if="!foldDone"
            ><span @click="toggleFold(foldDone)" class="done-item-text"
              >折叠已完成任务<i class="el-icon-top"></i></span
          ></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  calendarMarkData,
  dailyWorkData,
} from "@/api/workStation/workStation.js";
export default {
  props: ["componentTitle"],
  components: {},
  data() {
    return {
      foldDone: true,
      selectDate: "",
      doneArr: [],
      workArr: [],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //this.clickDate(new Date())
      this.getSelectDate(new Date());
      //this.getTaskData();
    },
    //日历日期点击事件
    clickDate(val) {
      this.getSelectDate(val);
      //this.getTaskData(val);
    },
    //前一个月
    preClick(val) {
      this.getSelectDate(val, 1);
      //this.getTaskData(val);
    },
    //后一个月
    nextClick(val) {
      this.getSelectDate(val, 1);
      //this.getTaskData(val);
    },
    //切换折叠与展开
    toggleFold(val) {
      this.foldDone = !this.foldDone;
    },
    //获取任务列表
    async getTaskData(val) {
      let str =
        this.selectDate.substring(0, 4) +
        "-" +
        this.selectDate.substring(5, 7) +
        "-" +
        this.selectDate.substring(8, 10);
      let param = {
        account: this.$store.getters.userInfo.account,
        currDate: str, //val?dateFormat ==2?str:this.$utils.formatDate(val):this.$utils.getCurrentDate(1),
      };
      await dailyWorkData(param).then(
        (res) => {
          if (res.code == 200) {
            this.workArr = res.data.unDone;
            this.doneArr = res.data.done;
            /* let doneData = res.data.done ||[]
          let filterData = doneData.filter(i =>{
            return i.status != "END_PATROL"
          })
          this.doneArr = filterData ||[] */
            if (this.doneArr && this.doneArr.length > 0) {
              this.doneArr.map((item) => {
                item.orderTypeName = this.$store.getters["fineDirtDataName"](
                  "order_type",
                  item.orderType
                );
                item.className = "grayColor";
              });
            }
            if (this.workArr && this.workArr.length > 0) {
              this.workArr.map((item) => {
                item.orderTypeName = this.$store.getters["fineDirtDataName"](
                  "order_type",
                  item.orderType
                );
                //日常维护单或试验
                if (
                  item.orderType == "maintain" ||
                  item.orderType == "experiment"
                ) {
                  item.className = "normalColor";
                }
                //大修或缺陷
                if (
                  item.orderType == "overhaul" ||
                  item.orderType == "defect"
                ) {
                  item.className = "dangerColor";
                }
                //巡视或计划检修
                if (item.orderType == "patrol" || item.orderType == "repair") {
                  item.className = "warnColor";
                }
              });
            }
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    //点击右侧的块，跳转到指定的页面模块
    goPage(item) {
      let router = "";
      let form = {};
      form.id = item.id;
      form.status = item.status;
      form.pageType = "details";
      switch (item.orderType) {
        case "repair":
          router = "/orderManagement/planRepair/details"; //计划检修
          break;
        case "patrol":
          router = "/orderManagement/patrolOrder/details"; //巡视
          break;
        case "overhaul":
          router = "/orderManagement/overhaul/details"; //大修
          break;
        case "defect":
          router = "/orderManagement/defectOrder/details"; //缺陷
          form.menuType = "mechatronics";
          form.pageType = "edit";
          break;
        case "maintain":
          router = "/orderManagement/normalMaintenance/details"; //日常维护单
          break;
        case "experiment":
          router = "/orderManagement/experimentOrder/details"; //试验
          break;
      }
      let { href } = this.$router.resolve({
        path: router,
        query: form,
      });
      this.$utils.setCurrentInfo();
      window.open(href, "_blank");
    },
    //日期格式化
    getSelectDate(val, type) {
      let year = val.getFullYear();
      let month =
        val.getMonth() + 1 > 9
          ? val.getMonth() + 1
          : "0" + (val.getMonth() + 1);
      let day = "";
      if (type == 1) {
        day = "01";
      } else {
        day = val.getDate() > 9 ? val.getDate() : "0" + val.getDate();
      }
      let date = year + "." + month + "." + day;
      this.selectDate = date;
      this.getTaskData();
    },
  },
};
</script>

<style lang="less" scoped>
.workCalendar {
  height: 100%;
  width: 100%;
  display: flex;
  .workTittle {
    color: #999999;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    padding-left: 5px;
    /deep/.el-divider--vertical {
      margin-left: 12px;
    }
  }
  .left-part {
    width: calc(60% - 15px);
    display: flex;
    flex-direction: column;
  }
  .calendar {
    margin: -10px 12px 14px 20px;
    height: calc(100% - 50px);
  }
  .dalyItem {
    width: calc(40% + 15px);
    margin: 15px 5px 15px 0;
    display: flex;
    flex-direction: column;
    .itemContent {
      height: calc(100% - 24px);
      width: 100%;
      overflow-y: auto;
    }
    .doneItem {
      width: calc(100% - 8px);
      margin: 0 auto;
      .done-item-text {
        font-size: 14px;
        color: #999999;
        cursor: pointer;
      }
      /deep/.el-divider__text.is-center {
        left: 36%;
        transform: translateX(-28%) translateY(-50%);
      }
      /deep/.el-divider__text {
        padding: 0 15px;
        color: #999999;
      }
      /deep/.el-divider {
        background-color: #efefef;
      }
    }
    .workItem {
      max-height: 70px;
      background: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(204,204,204,0.4);;
      border-radius: 4px;
      text-align: left;
      padding: 11px 11px 11px 12px;
      width: calc(100% - 8px);
      margin-top: 12px;
      margin-left: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      //超出两行出现省略号的问题
      //overflow: hidden;
      // text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      //解决数字英文不出现省略号的问题
      word-break: break-all;
      cursor: pointer;
      &:first-child {
        margin-top: 12px;
      }
      .itemType {
        font-size: 14px;
        border-radius: 4px;
        padding: 2px 4px;
        color: #666666;
        border: 1px solid #666666;
      }
      .itemTitle {
        font-size: 16px;
        padding-left: 8px;
        color: #666666;
        line-height: 26px;
      }
      .doneType {
        font-size: 14px;
        border-radius: 4px;
        padding: 2px 4px;
        color: #cccccc;
        border: 1px solid #cccccc;
      }
      .doneTitle {
        font-size: 16px;
        padding-left: 8px;
        color: #cccccc;
        line-height: 26px;
      }
    }
  }
  .dangerColor {
    color: #ef4c4c;
    background: #ffe4e4;
  }
  .warnColor {
    color: #faa224;
    background: #fff1de;
  }
  .normalColor {
    color: #409eff;
    background: #ecf6ff;
  }
  .grayColor {
    background: #efefef;
    color: #999999;
  }
}
</style>
